<template xmlns:th="http://www.w3.org/1999/xhtml">
  <div id="Catalog">
    <div id="item_box">
      <div>
        <br />
        <br />
        <img id="item_pic" :src="item.product.picture" />
      </div>
      <div id="item_att">
        <br />
        <h2>{{ item.itemId }}{{ item.product.name }}</h2>
        <br />
        <div>{{ item.attribute1 }}{{ item.attribute2 }}</div>
        <div>{{ item.attribute3 }}</div>
        <div>{{ item.attribute4 }}</div>
        <div>{{ item.attribute5 }}</div>
        <br />
        <div>{{ item.quantity }} in stock.</div>
        <br />
        <div>{{ item.listPrice }}$</div>


<!--        <h2>{{ item.itemId }}</h2>-->
<!--        <br />-->
<!--        <div>{{ item.attribute1 }}{{ item.attribute2 }}</div>-->
<!--        <div>{{ item.attribute3 }}</div>-->
<!--        <div>{{ item.attribute4 }}</div>-->
<!--        <br />-->
<!--        <div>{{ item.quantity }}</div>-->
<!--        <br />-->
<!--        <div>{{ item.listPrice }}</div>-->

        <br />
        <br />
        <br />
<!--        <a href="addItemToCart?workingItemId=EST-13" class="Button">加入购物车</a>-->
        <h4 >
<!--          <router-link :to=" {name:'cart',params:{name:item.itemId}}" @click="addToCart2(item.itemId)">-->
            <router-link :to="{name:''} " @click="addToCart2(item.itemId)">
            加入购物车
          </router-link>
        </h4>

        <br />
        <br />
        <div id="BackLink">
<!--          <a href="productForm?productId=CHEESE-03">{{item.productId}}</a>-->
          <h4>
            <router-link :to=" {name:'product',params:{name:item.product.productId } }">
              {{item.productId}}
            </router-link>
          </h4>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import api from "@/api";
import {reactive} from "vue";
import {useRoute} from "vue-router";
import axios from "axios";
import router from "@/router";
export default {
  name: "ItemView",
  setup() {
    const item= reactive({})
    // let productName = this.$route.params.name;
    const route = useRoute()
    console.log(route.params.id) // 获取路由参数中的id值
    api.getItemById(route.params.id).then(
        res => {
          console.log(1)
          console.log(res.data.data)
          Object.assign(item, res.data.data)
         //items.push(...res.data.data)
        }
    )

    //TODO 记得从session拿到username，下面的都是这个username
    const user = JSON.parse(sessionStorage.getItem('user'))
    let user_name = ''

    if(user){
      user_name = user.username
    }

    //点击函数
    const addToCart2 = async (itemId) => {
       //try {
         //判断user_name是不是为空
         if(user_name)
         {
           console.log(user_name)
           const response = await axios.post("http://localhost:8091/cart/cartItem", null, {
             params: {
               //TODO 记得从session拿到username，下面的都是这个username
               //username: "j2ee",
               username: user_name,
               itemId: itemId
             }
           });
           alert('加入购物车成功，刷新查看');
           console.log('Response:', response.data);
           await router.push('/main/cart');
         }
      else {
           alert('加入购物车失败');
        await router.push('/main/signOn')
      }
    };

    return{
      item,
      addToCart2}
  }//setup()

};// default


</script>


<style scoped>
#item_att {
  width: 185px;
}
#item_box {
  margin: 40px auto;
}
</style>
